<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>照片墙展示</title>
		<link rel="stylesheet" href="style.css">
        <style type="text/css">
        <!--设置样式-->
   /*内外边距*/
   * {
	margin: 0;
	padding: 0;
    }
    html{
     background: url("../static/back.jpg");
    }
    
    
    ul {
    	width: 1020px;
    	height: 600px;
    	border: white solid 5px;
    	margin: 60px auto;
    	box-shadow: 0px 0px 10px #ccc;
    }
    
    li {
    	width: 320px;
    	height: 180px;
    	list-style: none;
    	float: left;
    	margin: 10px;
    	<!--扩散程度 阴影颜色-->
    	box-shadow: 0px 0px 10px white;
    }
    
    img {
    	width: 100%;
    	height: 100%;
    }
    /*鼠标悬停*/
    img:hover {
    	width: 250px;
    	height: 350px;
    	position: relative;
    	top: -40px;
    	left: -40px;
    }
   </style>
</head>
    <body>
    <ul>
    	{%for i in data%}
    		<li><img src={{i}} ></li>
    	{%endfor%}
    			
    		</ul>
</body>
</html>
